<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue基本操作样式3 - 变量外置</title>
    <!--1 导入vue-->
    <script src="./js/vue.global.js"></script>
</head>
<body>
    <!--2 设定html里面应用的vue区域-->
    <div id="vue_mount">
        第一个信息: {{message}}<br>
        第二个信息: {{counter}}
    </div>
</body>

</html>
<script>
   // 3 定制vue的基本逻辑
   const { createApp } = Vue
   const my_message = "外置效果"
   const my_counter = 880
    const Vue_app = {
       // 定制一个函数方法 -- 返回普通的属性数据 data()
        data() {
            return {
                message: my_message,
                counter: my_counter
            }
        },
        // 定制自动执行的区域 -- mounted()
        mounted(){
            // 借助于原生的js实现数据属性的动态变化
            // setInterval(执行动作，间隔时间【ms】)
            setInterval(()=>{
                this.counter++  // this代表当前的文件区域，counter是我们的属性
            }, 1000)
        }
    }
    // 4 将vue_app 变量应用在vue的对象中挂载到html区域
    createApp(Vue_app).mount('#vue_mount')

</script>


